<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-tabs v-model="activeTab" @tab-click="handleTabClick">
					<el-tab-pane label="租户列表" name="tenant"></el-tab-pane>
					<el-tab-pane label="实名列表" name="verification"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="right-panel">
				<div class="right-panel-search" v-if="activeTab === 'tenant'">
					<el-input style="width: 150px;" v-model="search.keyword" placeholder="关键词" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<!-- 租户列表 -->
			<div v-if="activeTab === 'tenant'">
			<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="ID" prop="id" width="80" sortable='custom'></el-table-column>
				<el-table-column label="租户编码" prop="tenant_code" width="150" sortable='custom'></el-table-column>
				<el-table-column label="公司名称" prop="company_name" width="200"></el-table-column>
				<el-table-column label="联系人" prop="contact_name" width="120"></el-table-column>
				<el-table-column label="联系电话" prop="contact_phone" width="150"></el-table-column>
				<el-table-column label="联系邮箱" prop="contact_email" width="200"></el-table-column>
				<el-table-column label="余额" prop="balance" width="120">
					<template #default="scope">
						<span style="color: #67C23A;">¥{{scope.row.balance}}</span>
					</template>
				</el-table-column>
				<el-table-column label="冻结余额" prop="frozen_balance" width="120">
					<template #default="scope">
						<span style="color: #E6A23C;">¥{{scope.row.frozen_balance}}</span>
					</template>
				</el-table-column>
				<el-table-column label="总充值" prop="total_recharge" width="120">
					<template #default="scope">
						<span style="color: #409EFF;">¥{{scope.row.total_recharge}}</span>
					</template>
				</el-table-column>
				<el-table-column label="总消费" prop="total_consume" width="120">
					<template #default="scope">
						<span style="color: #F56C6C;">¥{{scope.row.total_consume}}</span>
					</template>
				</el-table-column>
				<el-table-column label="状态" fixed="right" align="center" prop="status" width="80">
					<template #default="scope">
						<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="1" :inactive-value="0"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="created_at" width="170"></el-table-column>
				<el-table-column label="操作" fixed="right" align="right" width="240">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
							<el-button text type="primary" size="small" @click="table_audit(scope.row, scope.$index)">审核</el-button>
							<el-button 
								text 
								:type="scope.row.status == 1 ? 'warning' : 'success'" 
								size="small" 
								:loading="scope.row.$toggle_loading"
								@click="toggleTenantStatus(scope.row, scope.$index)">
								{{ scope.row.status == 1 ? '禁用' : '启用' }}
							</el-button>
							<!-- <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="danger" size="small">删除</el-button>
								</template>
							</el-popconfirm> -->
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
			</div>
			
			<!-- 实名列表 -->
			<div v-if="activeTab === 'verification'">
				<verification-component></verification-component>
			</div>
		</el-main>
	</el-container>

	<audit-dialog v-if="dialog.audit" ref="auditDialog" @success="handleSuccess" @closed="dialog.audit=false"></audit-dialog>
	<detail-dialog v-if="dialog.detail" ref="detailDialog" @closed="dialog.detail=false"></detail-dialog>
</template>

<script>
	import auditDialog from './audit'
	import detailDialog from './detail'
	import verificationComponent from './verification'

	export default {
		name: 'tenant',
		components: {
			auditDialog,
			detailDialog,
			verificationComponent
		},
		data() {
			return {
				activeTab: 'tenant',
				dialog: {
					audit: false,
					detail: false
				},
				apiObj: this.$API.system.tenant.list||[],
				selection: [],
				search: {
					keyword: ''
				}
			}
		},
		mounted() {
			this.getInit()
		},
		methods: {
			async getInit() {
				// 初始化数据
			},
			//标签页切换
			handleTabClick(tab) {
				this.activeTab = tab.name
			},
			//查看
			table_show(row){
				this.dialog.detail = true
				this.$nextTick(() => {
					this.$refs.detailDialog.open(row.id)
				})
			},
			//审核
			table_audit(row){
				this.dialog.audit = true
				this.$nextTick(() => {
					this.$refs.auditDialog.open().setData(row)
				})
			},
			//删除
			async table_del(row, index){
				var reqData = {id: row.id}
				var res = await this.$API.system.tenant.delete.post(reqData);
				if(res.code == 200){
					this.$refs.table.tableData.splice(index, 1);
					this.$message.success("删除成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
			//搜索
			upsearch(){
				let search = JSON.parse(JSON.stringify(this.search))
				this.$refs.table.upData(search)
			},
			//本地更新数据
			handleSuccess(data, mode){
				if(mode=='add'){
					data.id = new Date().getTime()
					this.$refs.table.tableData.unshift(data)
				}else if(mode=='edit'){
					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
						Object.assign(item, data)
					})
				}
			},
			//切换租户状态
			async toggleTenantStatus(row){
				const newStatus = row.status == 1 ? 0 : 1
				const action = newStatus == 1 ? '启用' : '禁用'
				
				try {
					await this.$confirm(`确定要${action}该租户吗？`, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					
					row.$toggle_loading = true
					
					const res = await this.$API.system.tenant.toggleStatus.post({
						tenant_id: row.id.toString(),
						status: newStatus.toString()
					})
					
					if(res.code == 200){
						row.status = newStatus
						this.$message.success(`租户已${action}`)
					}else{
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} catch (error) {
					if(error !== 'cancel'){
						this.$alert('操作失败', "提示", {type: 'error'})
					}
				} finally {
					row.$toggle_loading = false
				}
			},
			//表格内开关
			async changeSwitch(val, row){
				// 先恢复原状态，等待接口返回结果
				row.status = row.status == 1 ? 0 : 1
				let data = JSON.parse(JSON.stringify(row))
				row.$switch_status = true;
				
				try {
					var res = await this.$API.system.tenant.toggleStatus.post({
						tenant_id: data.id.toString(),
						status: val.toString()
					});
					
					if(res.code == 200){
						delete row.$switch_status;
						row.status = val;
						this.$message.success(val == 1 ? "租户已启用" : "租户已禁用")
					}else{
						// 恢复原状态
						row.status = row.status == 1 ? 0 : 1
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} catch (error) {
					// 恢复原状态
					row.status = row.status == 1 ? 0 : 1
					this.$alert('操作失败', "提示", {type: 'error'})
				} finally {
					delete row.$switch_status;
				}
			},
		}
	}
</script>

<style>

</style>

